<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Card, Checkbox, Empty, Image, Tag } from 'ant-design-vue';
import { getDressResourcePage } from '#/api/wedding';
import type { WeddingDress } from '#/api/wedding';

const props = defineProps<{
  selected: WeddingDress[];
}>();

const emit = defineEmits(['update:selected']);

const loading = ref(false);
const dressList = ref<WeddingDress[]>([]);

const loadDresses = async () => {
  loading.value = true;
  try {
    const result = await getDressResourcePage({ pageNo: 1, pageSize: 100 });
    dressList.value = result.list;
  } finally {
    loading.value = false;
  }
};

const isSelected = (dress: WeddingDress) => {
  return props.selected.some(item => item.id === dress.id);
};

const toggleSelect = (dress: WeddingDress) => {
  const newSelected = isSelected(dress)
    ? props.selected.filter(item => item.id !== dress.id)
    : [...props.selected, dress];
  emit('update:selected', newSelected);
};

onMounted(() => {
  loadDresses();
});
</script>

<template>
  <div v-loading="loading">
    <div class="mb-4 text-sm text-gray-600">
      已选择 {{ selected.length }} 件婚纱
    </div>
    
    <div v-if="dressList.length > 0" class="grid grid-cols-4 gap-4">
      <Card
        v-for="dress in dressList"
        :key="dress.id"
        hoverable
        :class="{ 'border-2 border-blue-500': isSelected(dress) }"
        @click="toggleSelect(dress)"
      >
        <template #cover>
          <Image
            v-if="dress.images && dress.images.length > 0"
            :src="dress.images[0]"
            :height="200"
            :preview="false"
            class="object-cover"
          />
        </template>
        
        <div class="p-2">
          <div class="flex justify-between items-start mb-2">
            <div class="font-medium">{{ dress.dressName }}</div>
            <Checkbox :checked="isSelected(dress)" @click.stop />
          </div>
          <div class="text-xs text-gray-500 mb-1">{{ dress.brand }}</div>
          <div class="flex justify-between items-center">
            <Tag color="blue">{{ dress.category }}</Tag>
            <span class="text-red-500 font-bold">¥{{ dress.rentalPrice }}</span>
          </div>
        </div>
      </Card>
    </div>
    
    <Empty v-else description="暂无可用婚纱" />
  </div>
</template>

